<template>
<div>
   <el-table
    :data="shopList"
    border
    style="width: 100%"
     ref="multipleTable"
     tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    row-class-name="tableRowClassName">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="pname"
      label="商品名称"
      width="180">
    </el-table-column>
     <el-table-column
      prop="price"
      label="商品价格">
    </el-table-column>
    <el-table-column
      prop="num"
      label="商品数量"
       width="180">
    </el-table-column>
     <el-table-column
      prop="pimage"
      label="图片"
      width="180">
       <template slot-scope="scope">
      <el-image
      style="width: 100px; height: 100px"
      :src="scope.row.pimage"
      fit="fit"></el-image>
      </template>
    </el-table-column>

     <el-table-column label="操作">
      <template slot-scope="scope">
           <el-button type="success"
          @click="addCart(scope.row)">加入一个</el-button>
           <el-button type="success"
          @click="addCart10(scope.row)">加入10个</el-button>
        <el-button
          @click="deleteOneCart(scope.row)" type="warning" >删除一个</el-button>
           <el-button
          @click="deleteCart(scope.row)" type="warning" >删除这条</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div
          v-if="dialogVisible">
           <div class="ss"> <span style="color: red">¥{{totalPrice}}元</span></div>
    <el-button

          @click="deleteAll" size="mini" type="danger">清空购物车</el-button>
           <el-button 
          @click="pay" type="success">付款</el-button>
        
 <div v-html="alipayWap" ref="alipayWap"></div>
    <div v-html="alipayWap" ref="alipayWap"></div></div>
          <div class="ss">{{tip}}</div>
</div>
</template>

<script>
import Vue from 'vue'
export default {
  name:'',
  data () {
    return {
      shopList: [],
      params:{
        page:2,
        size:5
      },
       total:10,
        multipleSelection: [
        ],
        tip:'',
        dialogVisible:true,
        totalPrice:0,
         alipayWap:"",
         ids:[]
    }
  },
  created () {

  },
  mounted () {
      this.findAll()
  },
  methods: {
    findAll(){
      Vue.axios.post("http://localhost:8088/cart/findAll").then(res=>{
        if(res.data.code==0){
          this.shopList=res.data.data;
          this.total=res.data.total;
          this.dialogVisible=true
        }else if(res.data.code==2){
            this.shopList=res.data.data
            this.tip=res.data.message
            this.dialogVisible=false
        }else{
          this.$router.push("/login")
        }
      })
      },
      deleteOneCart(row){
          Vue.axios.post("http://localhost:8088/cart/deleteOneCart/"+row.pid).then(res=>{
              if(res.data.code==0){
                  this.findAll()
                const h = this.$createElement;
                this.$message({
                message: h('p', null, [
                    h('span', null, ''),
                    h('i', { style: 'color: teal' }, res.data.message)
                ])
                });
              }
          })
      },
      deleteCart(row){
          Vue.axios.post("http://localhost:8088/cart/deleteCart/"+row.pid).then(res=>{
              if(res.data.code==0){
                  this.findAll()
                const h = this.$createElement;
                this.$message({
                message: h('p', null, [
                    h('span', null, ''),
                    h('i', { style: 'color: teal' }, res.data.message)
                ])
                });
              }
          })
      },
       deleteAll(){
          Vue.axios.post("http://localhost:8088/cart/deleteAll").then(res=>{
              if(res.data.code==0){
                  
                  this.findAll();
                
                const h = this.$createElement;
                this.$message({
                message: h('p', null, [
                    h('span', null, ''),
                    h('i', { style: 'color: teal' }, res.data.message)
                ])
                });
              }
          })
      },


      handleSelectionChange(val){
        this.multipleSelection = val;
        this.totalPrice=0;
        this.ids=[]
        if(this.multipleSelection.length>0){
            for(let x=0;x<this.multipleSelection.length;x++){
                this.totalPrice=this.totalPrice+this.multipleSelection[x].price*this.multipleSelection[x].num;
                this.ids.push(this.multipleSelection[x].pid)
            }
        }

      },

      pay(){
          Vue.axios.post("http://localhost:8088/ali/pay",{ids:this.ids}).then(res=>{
            if(res.data.code==1){
              this.$router.push("/login")
            }
             this.alipayWap=res.data
          this.$nextTick(() => {
            this.$refs.alipayWap.children[0].submit()
          })
          })
      },



       addCart(row){
        Vue.axios.post('http://localhost:8088/cart/addCart/'+row.pid).then(res=>{
          if(res.data.code==0){
             const h = this.$createElement;
                this.$message({
                message: h('p', null, [
                    h('span', null, ''),
                    h('i', { style: 'color: teal' }, res.data.message)
                ])
                });
          }else{
            const h = this.$createElement;
                this.$message({
                message: h('p', null, [
                    h('span', null, ''),
                    h('i', { style: 'color: teal' }, res.data.message)
                ])
                });
                 this.$router.push("/login")
          }
          this.findAll()
        })
      },
       addCart10(row){
        Vue.axios.post('http://localhost:8088/cart/addCart10/'+row.pid).then(res=>{
          if(res.data.code==0){
             const h = this.$createElement;
                this.$message({
                message: h('p', null, [
                    h('span', null, ''),
                    h('i', { style: 'color: teal' }, res.data.message)
                ])
                });
          }else{
            const h = this.$createElement;
                this.$message({
                message: h('p', null, [
                    h('span', null, ''),
                    h('i', { style: 'color: teal' }, res.data.message)
                ])
                });
                 this.$router.push("/login")
          }
          this.findAll()
        })
      }
  }
}
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .ss{
      color: red;
      font-size: 60px;
      text-align: center;
  }
</style>

